<template>
    <div class="top">
      <div class="animate__animated animate__backInLeft">
    <el-time-picker
    :editable='false'
    v-model="values"
    @change="changetime"
    placeholder="播放任意时间点">
  </el-time-picker>
      </div>
    </div>
</template>
<script>
    import axios from 'axios'
    export default {
        name: 'topandmiddle',
        data() {
            return {
                values: new Date(2021, 6, 23, 0, 0),
                time: '',
                ip: window.location.hostname,
                resdata: []
            }
        },
        methods: {
            changetime(val) {
                this.time = val
                const that = this
                const times = this.time.toString()

                function getUsertiem() {
                    return axios.get('http://' + that.ip + ':4000/time', {
                        params: {
                            tiemsdata: times.substring(16, 24)
                        }
                    }).then((res) => {
                        that.resdata = Array.from(new Set(res.data))
                        console.log(that.resdata)
                        for (let i = 0; i < that.resdata.length; i++) {
                            const index = that.resdata
                            const indexdata = index[i].match(times.substring(16, 24))
                            if (indexdata != null) {
                                console.log(indexdata.input)
                                console.log(i)
                            }
                        }
                        // const arrdata = that.resdata.filter((value) => {
                        //   return value !== '\'109 out of range\\r\\n\''
                        // })
                        // console.log(vale)
                        // console.log(that.resdata.match('109 out of range'))
                        // that.resdata.forEach((itme) => {
                        //   console.log(itme)
                        // })
                        // const resstring = that.resdata.toString()
                        // console.log(n.length)
                        // for (let i = 0; i < resstring.length; i++) {
                        //   console.log(resstring[i].replace(/\rn/g))
                        // }
                        // for (const iterator of resstring) {
                        //   console.log('循环字符串' + iterator)
                        // }
                        // console.log(n)
                        // console.log(Array.from(new Set(res.data)))
                        if (res) {
                            that.$message({
                                message: '你好，设备时间设置成功',
                                type: 'success'
                            })
                        }
                    }).catch((error) => {
                        that.$message.error(`服务器连接失败，请检查后台是否开启${error}`)
                    })
                }

                function getUsergetiem() {
                    return axios.get('http://' + that.ip + ':9993', {
                        params: {
                            getTime: that.getTimes
                        }
                    })
                }
                axios.all([getUsertiem(), getUsergetiem()])
                    // axios.get('http://192.168.10.140:5000/time', {
                    //   params: {
                    //     timesdata: times.substring(16, 25)
                    //   }
                    // })
                    // console.log(times.substring(16, 25))
                this.values = new Date(2021, 6, 23, 0, 0)
            }
        }
    }
</script>

<style lang="scss">
    /* 去掉了scoped 会造成全局渲染，注意 */
    
    .el-time-panel__content::after,
    .el-time-panel__content::before {
        height: 33px !important;
        border-top: 2px solid #E4E7ED !important;
        border-bottom: 2px solid #E4E7ED !important
    }
    
    .el-time-spinner__item {
        font-size: 35px !important
    }
    
    .el-time-panel {
        width: 400px !important;
    }
    
    .top .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
        width: 400px !important;
    }
    
    .el-time-panel__footer {
        height: 55px !important;
    }
    
    .el-time-panel__btn {
        line-height: 45px !important;
        font-size: 20px !important;
    }
</style>